<div class="dbviewer-tab">
    <cly-main>
        <div class="bu-columns">
            <div class="bu-column bu-is-one-third">
                <div class="dbviewer-tab__sidebar bg-white">
                    <div class="dbviewer-tab__app-selector-dropdown">
                        <cly-select-x
                            @change="onAppChange($event)"
                            v-model="appFilter"
                            :options="apps">
                        </cly-select-x>
                    </div>
                    <cly-listbox
                        class="dbviewer-tab__collections-list"
                        skin="jumbo"
                        v-model="selectedCollection"
                        :searchable="true"
                        :options="preparedCollectionList"
                        @change="onCollectionChange"
                    >
                    </cly-listbox>
                </div>
            </div>
            <div class="bu-column">
                <div class="bu-level">
                    <div class="bu-level-left">
                        <div v-if="db" class="dbviewer-tab__content">
                            <div class="bu-has-text-weight-normal bu-is-size-5">
                                <span v-if="index">{{ i18n('dbviewer.indexes-of') }} </span>{{ decodeHtml(collections[db].map[collection]) }}
                            </div>
                        </div>
                    </div>
                    <div class="bu-level-right">
                        <cly-more-options class="bu-ml-2" @command="dbviewerActions($event)">
                            <el-dropdown-item command="aggregation">{{ i18n('dbviewer.aggregate') }}</el-dropdown-item>
                            <el-dropdown-item command="indexes">{{ i18n('dbviewer.indexes') }}</el-dropdown-item>
                            <el-dropdown-item command="data">{{ i18n('dbviewer.data') }}</el-dropdown-item>
                        </cly-more-options>
                    </div>
                </div>
                <cly-section class="dbviewer-tab__result-table bu-mt-3">
                    <cly-datatable-n row-key="_id" :expand-row-keys="expandKeys" :hide-top="false" :show-header="false" :data-source="remoteTableDataSource" :export-query="getExportQuery" @search-query-changed="setSearchQuery" @row-click="handleTableRowClick" ref="table" :row-class-name="tableRowClassName">
                        <template slot="header-left">
                            <el-button @click="toggleExpand()">{{ isExpanded ? i18n('dbviewer.collapse-all') : i18n('dbviewer.expand-all') }}</el-button>
                            <el-button v-if="queryFilter" @click="removeFilters()" icon="fas fa-minus-square"> {{ i18n('dbviewer.remove-filters') }} </el-button>
                            <el-button @click="showFilterPopup()" icon="fas fa-filter"> {{ i18n('dbviewer.filter') }}</el-button>
                        </template>
                        <template v-slot="scope">
                            <el-table-column fixed type="expand">
                                <template v-slot="rowScope">
                                    <pre>
                                        <code class="language-json hljs dbviewer-tab__code">{{ JSON.parse(rowScope.row._view) }}</code>
                                    </pre>
                                </template>
                            </el-table-column>
                            <el-table-column prop="_id" fixed>
                                <template v-slot="rowScope">
                                    <span v-if="!index">_id: {{ rowScope.row._id }}</span>
                                    <span v-if="index">{{ rowScope.row.name }}</span>
                                    <el-button @click="showDetailPopup(rowScope.row)" class="dbviewer-tab__expand-button" icon="fas fa-expand"></el-button>
                                </template>
                            </el-table-column>
                        </template>
                    </cly-datatable-n>
                </cly-section>
            </div>
        </div>
        <cly-form-dialog title="Filter Query"
            name="dbviewer-filter-query"
            @submit="onExecuteFilter"
            saveButtonLabel="Apply Filter"
            v-bind="formDialogs.queryFilter"
            ref="dbviewerFilterForm"
            >
            <template v-slot="formDialogScope">
                <div class="dbviewer-tab__popup-content">
                    <div class="dbviewer-tab__filter-textarea">
                        <label class="text-small">{{ i18n('dbviewer.filter-query') }}</label>
                        <el-input
                            type="textarea"
                            v-model="formDialogScope.editedObject.filter"
                            placeholder="{}">
                    </el-input>
                    </div>
                    <div class="dbviewer-tab__projection">
                        <el-checkbox
                            class="bu-mt-2"
                            v-model="formDialogScope.editedObject.projectionEnabled">
                                <span class="bu-has-text-weight-normal">{{ i18n('dbviewer.select-fields-to-return') }}</span>
                        </el-checkbox>
                        <div>
                            <label
                                for="dbviewer-tab__projection-selector"
                                v-if="formDialogScope.editedObject.projectionEnabled"
                                class="text-small bu-mt-2">
                                {{ i18n('dbviewer.projection') }}
                            </label>
                            <el-select
                                :popper-append-to-body="false"
                                multiple
                                id="dbviewer-tab__projection-selector"
                                class="bu-mt-1"
                                :label="i18n('dbviewer.projection')"
                                v-if="formDialogScope.editedObject.projectionEnabled"
                                v-model="formDialogScope.editedObject.projection"
                                :placeholder="i18n('dbviewer.projection')"
                            >
                                <el-option
                                    v-for="item in projectionOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="dbviewer-tab__sort">
                        <el-checkbox
                            class="bu-mt-2"
                            v-model="formDialogScope.editedObject.sortEnabled">
                            <span class="bu-has-text-weight-normal"> {{ i18n('dbviewer.select-fields-to-sort') }}</span>
                        </el-checkbox>
                        <div>
                            <label
                                for="dbviewer-tab__sort-selector"
                                v-if="formDialogScope.editedObject.sortEnabled"
                                class="text-small bu-mt-2">
                                {{ i18n('dbviewer.sort-options') }}
                            </label>
                            <div class="dbviewer-tab__sort-inputs">
                                <el-select
                                    id="dbviewer-tab__sort-selector"
                                    class="bu-mt-1"
                                    :popper-append-to-body="false"
                                    :label="i18n('dbviewer.sort-options')"
                                    v-if="formDialogScope.editedObject.sortEnabled"
                                    v-model="formDialogScope.editedObject.sort"
                                    :placeholder="i18n('dbviewer.sort-options')">
                                    <el-option
                                        v-for="item in projectionOptions"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    >
                                    </el-option>
                                </el-select>
                                <el-switch
                                    id="dbviewer-tab__sort-type-selector"
                                    v-if="formDialogScope.editedObject.sortEnabled"
                                    v-model="isDescentSort"
                                    :active-text="i18n('dbviewer.descending')"
                                    :inactive-text="i18n('dbviewer.ascending')">
                                </el-switch>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="controls-left">
                <div @click="clearFilters()" class="text-medium color-danger bu-is-clickable">
                    Remove Filter
                </div>
            </template>
        </cly-form-dialog>
        <cly-form-dialog
            class="dbviewer-tab__detail-dialog"
            :isOpened="showDetailDialog"
            name="dbviewer-document-detail"
            :title="index ? JSON.parse(rowDetail).name : JSON.parse(rowDetail)._id"
            saveButtonLabel="Close"
            ref="dbviewerDetailDialog"
            @submit="showDetailDialog = false"
            :hasCancelButton="false"
            >
            <template v-slot="formDialogScope">
                <pre>
                    <code class="language-json hljs dbviewer-tab__code-in-dialog">
                        {{ JSON.parse(rowDetail) }}
                    </code>
                </pre>
            </template>
        </cly-form-dialog>
    </cly-main>
</div>